import React from 'react'
import type { FC, ReactNode } from 'react'
import { memo } from 'react'
import { NavBar, Toast, Form, Input, Button } from 'antd-mobile'
import { CloseOutline } from 'antd-mobile-icons'
import bg from '@/assets/images/avatar.png'
import { loginApi } from './api'
import type { loginParam } from './api'
import { MyLogin } from './style'
import { useNavigate } from 'react-router-dom'

interface Iprops {
  children?: ReactNode
}
const Login: FC<Iprops> = () => {
  const navigate = useNavigate()
  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000
    })
  const handlelogin = async (values: loginParam) => {
    const reuslt = await loginApi(values)
    Toast.show({
      icon: 'success',
      content: '登录成功',
      duration: 2000
    })
    console.log(reuslt)
    localStorage.setItem('h5-token', reuslt.data.token)
    localStorage.setItem('userinfo', JSON.stringify(reuslt.data.userInfo))
    navigate('/pz')
  }
  return (
    <MyLogin>
      <NavBar backIcon={<CloseOutline />} onBack={back} />
      <div className="bg">
        <img src={bg} alt="" />
      </div>

      <Form
        layout="horizontal"
        className="form"
        onFinish={handlelogin}
        footer={
          <Button block type="submit" shape="rounded" color="primary">
            登录
          </Button>
        }
      >
        <Form.Item label="用户名" name="username">
          <Input placeholder="请输入用户名" clearable />
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input placeholder="请输入密码" clearable type="password" />
        </Form.Item>
      </Form>
    </MyLogin>
  )
}
export default memo(Login)
